<template>
    <div class="open">
        <el-avatar :size="50" :src="'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg'" />
        <el-dropdown placement="bottom">
            <el-button> 操作 </el-button>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item>个人信息</el-dropdown-item>
                    <el-dropdown-item>个人形象</el-dropdown-item>
                    <el-dropdown-item @click="open">个人退出</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</template>

<script setup>
import requier from '@/requier/requier';
import router from '@/router';
import { ElMessage, ElMessageBox } from 'element-plus'
const open = () => {
    ElMessageBox.confirm(
        '你真的要退出么',
        'Warning',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            requier.post('/quit').then(res => {
                console.log(res);
                ElMessage({
                    type: 'success',
                    message: '退出成功',
                })
                router.push('/login')
                localStorage.clear('')
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '退出失败',
            })
        })
}
</script>

<style lang="scss" scoped>
.open{
    width: 100px;
    float: right;
    margin-right: 30px;
    align-items: center;
}
</style>